<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function $(id){
            return document.getElementById(id);
        }
        function checkName(){
            let regex= /^[a-zA-Z]{2,20}$/;
            let targetObj= $("nameSpan");
            if (regex.test($("userName").value)){
                targetObj.innerText="验证通过";
                targetObj.style.color="green";
                return true;
            }else{
                targetObj.innerText="请输入2-20个字母";
                targetObj.style.color="red";
                return false;
            }
        }
        function checkPassword(){
            let regex= /^\d{6}$/;
            let targetObj= $("pwdSpan");
            if (regex.test($("password").value)){
                targetObj.innerText="验证通过";
                targetObj.style.color="green";
                return true;
            }else{
                targetObj.innerText="请输入6位数字";
                targetObj.style.color="red";
                return false;
            }
        }
        function checkEmail(){
            let regex= /^$/;
            let targetObj= $("emailSpan");
            if (regex.test($("email").value)){
                targetObj.innerText="验证通过";
                targetObj.style.color="green";
                return true;
            }else{
                targetObj.innerText="请输入2-20个字母";
                targetObj.style.color="red";
                return false;
            }
        }
        function checkPhone(){
            let regex= /^1[358]\d{9}$/;
            let targetObj= $("phoneSpan");
            if (regex.test($("phone").value)){
                targetObj.innerText="验证通过";
                targetObj.style.color="green";
                return true;
            }else{
                targetObj.innerText="电话号码是13、15、18开始的11位数字";
                targetObj.style.color="red";
                return false;
            }
        }
        function checkBirthday(){
            return checkForm(/^[12]\d{3}-\d{2}-\d{2}$/,"birthday","birthSpan","生日格式为xxxx-xx-xx");
        }
        function checkForm(regex,id,spanId,info){
            let regexp=regex;
            let targetObj=$(spanId);
            if (regexp.test($(id).value)){
                targetObj.innerText="验证通过";
                targetObj.style.color="green";
                return true;
            }else{
                targetObj.innerText=info;
                targetObj.style.color="red";
                return false;
            }
        }
        function submitForm(){
            // if (checkName() && checkPassword() && checkEmail() && checkPhone() && checkSalary() && checkBirthday()){
            //     $("form1").submit();
            // }else{
            //     alert("数据输入错误");
            // }
            $("form1").submit();
        }
    </script>
</head>
<body>
    <!--创建表单，要求用户名必须是2-20个字母。-->
    <!--密码必须是6位数字。-->
    <!--电子邮件必须是XX@XX.com格式。-->
    <!--电话号码必须是13、15、18开始的11位数字。-->
    <!--生日为XXXX-XX-XX-->
    <!--验证通过可以提交表单，验证失败则不予提交。-->
    <!--思考：如何重用表单验证代码。-->
    <div>
        <form action="add" id="form1">
            用户名： <input type="text" id="userName" name="userName"  onblur="checkName()">   <span id="nameSpan"></span> <br>
            密码： <input type="password" id="password" name="password" onblur="checkPassword()">  <span id="pwdSpan"></span> <br>
            电子邮件：<input type="email" id="email" name="email" onblur="checkEmail()">  <span id="emailSpan"></span> <br>
            电话号码：<input type="tel" id="phone" name="phone" onblur="checkPhone()">  <span id="phoneSpan"></span> <br>
            生日：<input type="text" id="birthday" name="birthday" onblur="checkBirthday()">  <span id="birthSpan"></span> <br>
            <input type="button" value="提交"  onclick="submitForm()">
        </form>
    </div>

</body>
</html>